<template>
  <div class="top">
    <el-card>
      <div class="dediv">
        <el-form :inline="true">
          <el-form-item
            ><el-input placeholder="请输入楼栋名称" @keyup.enter.native="seachEnter" v-model="keyword"></el-input
          ></el-form-item>
          <el-form-item
            ><el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
              >搜 索</el-button
            ></el-form-item
          >
        </el-form>
      </div>
      <div class="add">
        <el-button
          type="success"
          @click="handleAdd"
          icon="el-icon-plus"
          class="deadd"
          >添 加</el-button
        >
      </div>
    </el-card>
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          label="楼栋名称"
          align="center"
          property="buildingName"
        ></el-table-column>
        <el-table-column
          label="楼栋编号"
          align="center"
          property="buildingNum"
        ></el-table-column>
        <el-table-column
          label="楼层"
          align="center"
          property="floor"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-dialog :visible.sync="dialogFormVisible">
          <el-form :model="form" :rules="rules" ref="formDemo" class="stfrom">
            <el-form-item
              label="楼栋名称:"
              :label-width="formLabelWidth"
              prop="buildingName"
            >
              <el-input
                v-model="form.buildingName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="楼栋编号:"
              :label-width="formLabelWidth"
              prop="buildingNum"
            >
              <el-input
                v-model="form.buildingNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="楼层:"
              :label-width="formLabelWidth"
              prop="floor"
            >
              <el-input v-model="form.floor" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div>
        <el-pagination
          class="defenye"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageIndex"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.count"
          background
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  GetBuildingList,
  addBuilding,
  editBuilding,
  delBuilding,
} from "@/api/building";
export default {
  data() {
    return {
      keyword: "",
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        id: 0,
        buildingNum: "",
        buildingName: "",
        floor:""
      },
      rules: {
        buildingNum: [
          {
            required: true,
            trigger: "blur",
            message: "请输入楼栋编号",
          },
        ],
        buildingName: [
          {
            required: true,
            trigger: "blur",
            message: "请输入楼栋名称",
          },
        ],
      },
      page: {
        pageIndex: 1,
        pageSize: 10,
        count: 100,
      },
      currentIndex: 0,
    };
  },
  mounted() {
    this.GetList();
  },
  methods: {
    GetList() {
      let params = {
        keyword: this.keyword,
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize,
      };
      GetBuildingList(params).then((res) => {
        console.log(res);
        console.log(res.data);
        this.tableData = res.data;
        this.page.count = res.page.count;
      });
    },
      seachEnter(e){
        var keyword =window.event ?e.keyword :e.which;
        if(keyword === keyword){
          this.GetList()
        }
      },
    // 搜索
    handleQuery() {
      this.GetList();
      this.$message.success("查找成功");
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.form.id = 0;
      this.form.buildingName = "";
      this.form.buildingNum = "";
      this.form.floor = "";
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;

      this.form.id = row.id;
      this.form.buildingName = row.buildingName;
      this.form.buildingNum = row.buildingNum;
      this.form.floor = row.floor;
      this.currentIndex = index;
    },
    // 删除
    handleDelete(index, row) {
      // 删除时获得当前表数组中的下标
      this.currentIndex = index;
      // 弹框提示
      this.$confirm("此操作将永久删除该课程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delBuilding(row.id).then((res) => {
            if (res.code === 200) {
              this.tableData.splice(index, 1);
              this.$message.success("删除成功");
            } else {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCancel() {
      this.dialogFormVisible = false;
    },
    handleSave() {
      this.$refs.formDemo.validate(async (valid) => {
        if (!valid) return;
        // 如果表单中的id为0，则认为是添加用户，反之则为修改用户
        if (this.form.id === 0) {
          addBuilding(this.form)
            .then((res) => {
              console.log(res);
              if (res.code === 200) {
                //将新添加的数据push到现有表数据的最后面
                this.tableData.push(res.data);
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
          this.dialogFormVisible = false;
        } else {
          editBuilding(this.form.id, this.form)
            .then((res) => {
              console.log(res);
              this.tableData.splice(this.currentIndex, 1, res.data);
              this.$message.success(res.msg);
            })
            .catch((err) => {
              console.log(err);
            });
          this.dialogFormVisible = false;
        }
      });
    },
    // 页面页码改变时，重新拉取数据
    handleCurrentChange(val) {
      this.page.pageIndex = val > 0 ? val : 1;
      this.GetList();
    },
    // 页面大小改变时，重新拉取数据
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.GetList();
    },
  },
};
</script>
<style>
.dediv {
  display: flex;
  float: left;
}
.deadd {
  margin-top: 1px;
}
.defenye {
  margin-top: 30px;
  margin-bottom: 10px;
}
.defrom > .el-form-item > .el-form-item__label {
  font-weight: bolder !important;
  font-size: 18px;
}
</style>